<template>
	<view v-if="isShow" class="image-preview" :style="{width:systemInfo.screenWidth+'px',height:systemInfo.screenHeight+'px'}">
        <!--
		<view :class="dark_bg" :class="{active:active}"></view>
        -->
		<view :class="dark_bg" :style="active"></view>
		<swiper  class="swiper" @change="change" :current="current" :disable-programmatic-animation="true" :style="{width:systemInfo.screenWidth+'px',height:systemInfo.screenHeight+'px'}">
			<swiper-item v-for="(item,index) in imageUrl" :key="index">
				<view class="swiper-item" @tap="close(index)" :style="{width:systemInfo.screenWidth+'px',height:systemInfo.screenHeight+'px'}">
					<image :class="transition" :style="currentStyle[index]"  mode="aspectFill" :src="item"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="indicator" v-if="indicatorShow" :style="{ width:systemInfo.screenWidth+'px' }">
			<view class="indicator-dots" :class="`${index==current?'dots-yes':'dots-no'}`" v-for="(item,index) in imageUrl"></view>
		</view>
	</view>
</template>

<script setup lang="tsx" name="imagePreview">
import { nextTick, ref} from 'vue';

const systemInfo = ref(uni.getSystemInfoSync());
const active = ref("opacity:0");
const current = ref(0);
//const swiperShow = ref(false);
const currentStyle:any = ref([]);//图片位置
const imageUrl:any = ref();//图片地址
const isShow = ref(false);
const indicatorShow = ref(false);
let coordinate:any = {};//接收结束位置
let id = "";//缩列图ID前戳

let startStyle:any = [];
const open = (params:any) => {
	transition.value = "item-image-short";
	dark_bg.value = "dark_bg-short"
	startStyle = [];//初始化
	isShow.value = true;
	
	let startInfo:any = JSON.parse(JSON.stringify(params.startInfo));
	id = params.id;
	imageUrl.value = JSON.parse(JSON.stringify(params.urls));
	current.value = params.index;
	imageUrl.value.forEach((item:string,index:number) => {
		let info = startInfo;
		//console.log(startInfo)
		startStyle.push({
			width: `${info.width}px`,
			height: `${info.height}px`,
			top:`${info.top}px`,
			left:`${info.left}px`,
		});
	});
	currentStyle.value = JSON.parse(JSON.stringify(startStyle));
	//获取当前图片位置
	updateCoordinate();
	
	imageUrl.value.forEach((item:string,index:number) => {
		uni.getImageInfo({
			src: item, // 图片的路径  
			success: function (res:any){
				const width = res.width; // 图片的宽度  
				const height = res.height; // 图片的高度  
				
				const imgMaxWidth = systemInfo.value.screenWidth;
				const imgMaxHeight = imgMaxWidth*(height/width);
				
				let endStyle = {
				    width: `${imgMaxWidth}px`,
				    height: `${imgMaxHeight}px`,
				    top:`${(systemInfo.value.screenHeight-imgMaxHeight)/2}px`,
				    left:0,
				}
				currentStyle.value[index] = endStyle;
				//if(index==0)active.value = true;
				if(index==0)active.value = "opacity:1";
				if(imageUrl.value.length>1){
					setTimeout(()=>{
					    indicatorShow.value = true;
					},150)
				}
			}
		});
	});
}
const transition = ref("item-image-short");
const dark_bg = ref("dark_bg-short");
const close = (index:number) => {
	//active.value = false;
	active.value = "opacity:0";
	let newStyle:any = {
		width: `${coordinate.width}px`,
		height: `${coordinate.height}px`,
		top:`${coordinate.top}px`,
		left:`${coordinate.left}px`,
		opacity:coordinate.opacity
	};
	currentStyle.value[index] = newStyle;
	
	indicatorShow.value = false;
	let time = 150;
	if(transition.value == "item-image-long")time=300;
	nextTick(()=>{
	    setTimeout(()=>{
	        isShow.value = false;
	    },time)
	})
}
const emit = defineEmits(["onChange"])
const change = (e:any) => {
	//console.log(e.detail.current)
	current.value = e.detail.current;
	updateCoordinate();
}
const updateCoordinate = () => {
	uni.$once('imagePreviewUpdate',function(data){
		if(data==null){
			let currentWidth = currentStyle.value[current.value].width.slice(0, -2);
			let currentHeight = currentStyle.value[current.value].height.slice(0, -2);
			transition.value = "item-image-long"
			dark_bg.value = "dark_bg-long"
			coordinate = {
				width:Number(currentWidth),
				height:Number(currentHeight),
				top:(systemInfo.value.screenHeight-currentHeight)/2,
				left:0,
				opacity:0,
			}
		}else{
			data.opacity = 1;
			coordinate = data;
			transition.value = "item-image-short"
			dark_bg.value = "dark_bg-short"
		}
	})
	emit("onChange",{id:id,index:current.value});
}
defineExpose({
  open,
  close
});
</script>

<style lang="scss" scoped>
.image-preview {
	position: fixed;
	z-index:500;
	top:0;
	left:0;

    .dark_bg-short{
        background-color: rgba(0, 0, 0);
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        opacity:0;
        z-index:1;

        /* #ifdef APP-NVUE */
        transition: opacity .15s linear;
        /* #endif */

        /* #ifndef APP-NVUE */
        transition: all linear .15s;
        /* #endif */

        &.active{
            opacity:1;
        }
    }
	.dark_bg-long{
	    background-color: rgba(0, 0, 0);
	    position:absolute;
	    top:0;
	    left:0;
	    right:0;
	    bottom:0;
	    opacity:0;
	    z-index:1;
	
	    /* #ifdef APP-NVUE */
	    transition: opacity .3s linear;
	    /* #endif */
	
	    /* #ifndef APP-NVUE */
	    transition: all linear .3s;
	    /* #endif */
	
	    &.active{
	        opacity:1;
	    }
	}
	.swiper{
		position:fixed;
		z-index:11;
		top:0;
		left:0;
		.swiper-item{
			position: relative;
			.item-image-short{
				position:absolute;
				opacity:1;
			    /* #ifdef APP-NVUE */
			    transition-property: width, height, left, top,opacity;
				transition-duration:.15s;
			    transition-timing-function: linear;
			    /* #endif */
			
			    /* #ifndef APP-NVUE */
			    transition: all linear .15s;
			    /* #endif */
			}
			.item-image-long{
				position:absolute;
				opacity:1;
			    /* #ifdef APP-NVUE */
			    transition-property: width, height, left, top,opacity;
				transition-duration:.3s;
			    transition-timing-function: linear;
			    /* #endif */
			
			    /* #ifndef APP-NVUE */
			    transition: all linear .3s;
			    /* #endif */
			}
		}
	}
    .indicator{
		position:fixed;
		z-index:15;
		bottom: 100rpx;
		left: 0;
		
		display: flex;
		justify-content: center;
		flex-direction: row;
		align-items: center;
		.indicator-dots{
			width: 15rpx;
			height: 15rpx;
			margin: 0 15rpx;
			border-radius:50%;
		}
		.dots-yes{
			background: #ffffff;
		}
		.dots-no{
			background: #999999;
		}
	}
}
</style>